<ui:composition template="/template/templateSGR#{sesion.usuario.getRol() == 3 ? 'Usuario' : ''}.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:param name="param" value="autogestionDatos"/>
    <ui:define name="index">

        <h:form id="form-#{param}">

            <p:growl id="msg#{param}" showDetail="false" autoUpdate="true" />

            <article id="content">
                <div class="wrap">
                    <div class="box">
                        <div>
                            <h2 class="letter_spacing">Gestiona <span>tus datos en Deliccio</span></h2>
                            <p:tabView id="tabView#{param}" cache="true" dynamic="true" styleClass="externTab">

                                <p:tab title="Datos Personales">

                                    <p:panelGrid columns="2" styleClass="externo" style="width:400px;">

                                        <h:outputLabel value="(*)Nombre:" />
                                        <h:column>
                                            <p:inputText id="nombre#{param}" value="#{pCAutogestion.cliente.nombre}"
                                                         maxlength="40" required="true" requiredMessage="El campo Nombre es obligatrio" />
                                        </h:column>
                                        <h:outputLabel value="(*)Apellido:" />
                                        <p:inputText id="apellido#{param}" value="#{pCAutogestion.cliente.apellido}"
                                                     maxlength="40" required="true" requiredMessage="El campo Apellido es obligatrio" />
                                        <h:outputLabel value="(*)Email:" styleClass="sinAster2" />
                                        <p:inputText id="email#{param}" value="#{pCAutogestion.cliente.email}"
                                                     required="false" validatorMessage="El campo Email no es v&#225;lido. Ejemplo: ejemplo@algo.com">
                                            <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                                        </p:inputText>
                                        <h:outputLabel value="Tel&#233;fono:" styleClass="sinAster2"  />
                                        <p:inputMask id="telefono#{param}" value="#{pCAutogestion.cliente.telefono}" mask="99999999"/>
                                        <h:outputLabel value="Celular:"  styleClass="sinAster2" />
                                        <p:inputMask id="celular#{param}" value="#{pCAutogestion.cliente.cel}" mask="099999999"/>
                                        <h:outputLabel value="Fecha de Nacimiento:"  styleClass="sinAster2"  />  
                                        <p:calendar value="#{pCAutogestion.fechaNac}" id="fechaNac#{param}" size="10" pattern="dd/MM/yyyy" 
                                                    maxlength="10" navigator="true" effect="explode" maxdate="#{pCAutogestion.fechaActual}"
                                                    label="Fecha Nacimiento" readonlyInput="true" />
                                        <h:outputLabel value="Rut:"  styleClass="sinAster2"  />
                                        <p:inputText id="rut#{param}" value="#{pCAutogestion.cliente.rut}"
                                                     label="Rut" maxlength="40" required="false">
                                            <f:convertNumber integerOnly="true"/>
                                        </p:inputText>

                                    </p:panelGrid>

                                </p:tab><p:tab title="Datos de Direcci&#243;n">

                                    <p:panelGrid columns="2" styleClass="externo" style="width:430px">

                                        <h:outputLabel value="(*)Departamento:" />
                                        <h:column>
                                            <p:selectOneMenu id="departamento#{param}"  value="#{pCAutogestion.cliente.departamento}" style="width: 150px;margin-left:4px"
                                                             required="true" requiredMessage="Debe seleccionar un departamento">
                                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
                                                <f:selectItems value="#{departamentos.depatamentos}" />
                                            </p:selectOneMenu>
                                        </h:column>
                                        <h:outputLabel value="(*)Ciudad:" />
                                        <h:column>
                                            <p:inputText id="ciudad#{param}" value="#{pCAutogestion.cliente.ciudad}" maxlength="40" required="true" requiredMessage="El campo Ciudad es obligatrio" />
                                        </h:column>
                                        <h:outputLabel value="(*)Calle:" />
                                        <h:column>
                                            <p:inputText id="calle#{param}" value="#{pCAutogestion.cliente.calle}" maxlength="40" required="true" requiredMessage="El campo Calle es obligatrio" />
                                        </h:column>
                                        <h:outputLabel value="(*)Nro. Puerta:" />
                                        <h:column>
                                            <p:inputText id="nroPuerta#{param}" value="#{pCAutogestion.cliente.numero}" label="Nro. Puerta" size="5" maxlength="4" required="true" requiredMessage="El campo Nro. Puerta es obligatrio">
                                                <f:convertNumber integerOnly="true"/>
                                            </p:inputText>
                                        </h:column>
                                        <h:outputLabel value="Detalles:"  styleClass="sinAster2"/>
                                        <h:column>
                                            <p:inputTextarea cols="42" rows="4" autoResize="false" maxlength="255" id="detalles#{param}" value="#{pCAutogestion.cliente.detalle}" />
                                        </h:column>
                                    </p:panelGrid>

                                </p:tab><p:tab title="Datos de Usuario">

                                    <p:panelGrid columns="2" styleClass="externo" style="width:430px">
                                        <h:outputLabel value="Contraseña nueva:" styleClass="sinAster2"/>
                                        <p:password id="contrasenia#{param}N" value="#{pCAutogestion.contraseniaNueva}" feedback="true"
                                                    promptLabel="Ingresa tu clave nueva" weakLabel="D&#233;bil"  
                                                    goodLabel="Buena" strongLabel="Fuerte" match="contraseniaRe#{param}N"
                                                    label="Contrase&#241;a"
                                                    validatorMessage="No coincide la contrase&#241;a nueva" />
                                        <h:outputLabel value="Confirmar contraseña nueva:"  styleClass="sinAster2"/>
                                        <p:password id="contraseniaRe#{param}N" value="#{pCAutogestion.contraseniaNueva}" label="Confirmar Contrase&#241;a"/>

                                        <h:outputLabel value="Nombre de Usuario" rendered="false" />
                                        <p:inputText size="40" id="nombreUsuario#{param}" rendered="false" value="#{pCAutogestion.cliente.nombreUsuario}" maxlength="40" required="true" requiredMessage="El campo Nombre de Usuario es obligatrio" />
                                    </p:panelGrid>

                                </p:tab>

                            </p:tabView>

                            <div style="margin-top: 10px; width: 60%; ">
                                <h:link value="&#60;&#60; Volver" styleClass="btn-cancelar" outcome="/paginas/usuarios/autogestion/tabla_autogestion.xhtml" style="float: left;margin-top: 14px;" />
                                <p:commandLink update=":form-#{param} msg#{param}" 
                                               action="#{pCAutogestion.guardar}" style="float: right;"
                                               styleClass="button1">  
                                    <h:outputText value="Guardar" />
                                </p:commandLink>
                            </div>

                        </div>
                    </div>
                </div>
            </article>

        </h:form>

    </ui:define>
</ui:composition>
